 <template>
  <div class="box-card card-style total-item" :style="{'backgroundColor': background_color}">
    <div class="flex-around">
      <div class="title">
        <img :src="img" alt>
        <div>{{title}}</div>
      </div>
      <div>
        <div class="item" v-for="(item, index) in data" :key="index">
          <span class="label-text">{{item.name}}</span>
          <span class="price">{{item.value}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOwnerRequest, addRequest } from "api/account";

export default {
  data() {
    return {};
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    img: {
      type: String,
      default() {
        return "";
      }
    },
    title: {
      type: String,
      default() {
        return "";
      }
    },
    background_color: {
      type: String,
      default() {
        return "#40c9c6";
      }
    }
  },
  watch: {
    data: {
      handler: function(newVal, oldVal) {
        this.data = newVal;
      },
      deep: true
    }
  },
  components: {},
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
// -------------卡片--------------------------
.count-cards {
  @include fj(flex-start);
  align-items: center;
}
.wrap-item {
  flex-wrap: wrap;
}
.card-style {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.box-card {
  height: 100px;
  color: #fff;
  // width: 230px;
}

.flex-around {
  @include fj(space-between);
  align-items: center;
  padding: 0 15px;
  .title {
    text-align: center;
    padding-right: 20px;
    min-width: 76px;
  }

  .item{
    white-space: nowrap;
  }
  .text-right {
    text-align: right;
  }
  .label-text {
    @include sc(12px, #f1f1f1);
  }
  .price {
    @include sc(20px, #fff);
  }
  .text-blod {
    @include sc(30px, #fff);
  }
}

.total-item {
  background: #40c9c6;
  // width: 260px;
}
.today-item {
  background: #f56c6c;
  // width: 200px;
}
.course-item {
  background: #62bff0;
}
.user-item {
  background: #34b9d0d1;
}
// -------------卡片--------------------------
</style>
